<template>
  <a-modal
    :title="title"
    :width="1280"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-descriptions bordered>
        <a-descriptions-item label="标题">
          {{ model.oaTitle }}
        </a-descriptions-item>
        <a-descriptions-item label="OA治具申请流程RequestId">
          {{ model.oaRequestId }}
        </a-descriptions-item>
        <a-descriptions-item label="申请人工号">
          {{ model.oaReqUserNo }}
        </a-descriptions-item>
        <a-descriptions-item label="申请人姓名">
          {{ model.oaReqUserName }}
        </a-descriptions-item>
        <a-descriptions-item label="申请人部门">
          {{ model.reqDepartment }}
        </a-descriptions-item>
        <a-descriptions-item label="项目编号">
          {{ model.projNo }}
        </a-descriptions-item>
        <a-descriptions-item label="项目名称">
          {{ model.projName }}
        </a-descriptions-item>
        <a-descriptions-item label="产品类型">
          {{ model.prodType }}
        </a-descriptions-item>
        <a-descriptions-item label="电源功率">
          {{ model.acdcPower }}
        </a-descriptions-item>
        <a-descriptions-item label="应用方式">
          {{ model.applicationType }}
        </a-descriptions-item>
        <a-descriptions-item label="需求数量">
          {{ model.requestNum ? model.requestNum + '台' : '无' }}</a-descriptions-item
        >
        <a-descriptions-item label="制作数量">
          {{ model.actualNum ? model.actualNum + '台' : '无' }}</a-descriptions-item
        >
        <a-descriptions-item label="申请原因">
          {{ model.requestReason }}
        </a-descriptions-item>
        <a-descriptions-item label="需求日期">
          {{ model.requestDate }}
        </a-descriptions-item>
        <a-descriptions-item label="工装物料编码申请流程REQ_ID">
          {{ model.oaMcFlowReqId }}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left">
        物料编码
      </a-divider>

      <div>
        <a-row>
          <a-col :span="12">
            <a-tag color="blue" style="font-size: large">
              {{ model.materialCode }}
            </a-tag>
          </a-col>
          <a-col :span="12" style="text-align: right">
            <a-space>
              <a-button type="link" icon="search">
                <a
                  target="_blank"
                  href="http://10.10.10.245:6002/spa/workflow/static4form/index.html?_rdm=1635140681739#/main/workflow/req?iscreate=1&workflowid=397"
                  >从OA申请物料编码</a
                >
              </a-button>
              <a-button type="primary" icon="edit" @click="() => (materialCodeModal.visible = true)">
                手动选择物料编码
              </a-button>
            </a-space>
          </a-col>
        </a-row>

        <a-modal
          :title="materialCodeModal.title"
          :visible="materialCodeModal.visible"
          :confirm-loading="materialCodeModal.confirmLoading"
          @ok="handleOkMC"
          @cancel="handleCancelMC"
        >
          <template>
            <a-select
              show-search
              placeholder="输入以搜索物料编码"
              style="width: 100%"
              :value="selectValue"
              :filter-option="false"
              :not-found-content="fetching ? undefined : null"
              @search="fetchMaterialCode"
              @change="handleChange"
            >
              <a-spin v-if="fetching" slot="notFoundContent" size="small" />
              <a-select-option v-for="d in listdata" :key="d.value">
                {{ d.text }}
              </a-select-option>
            </a-select>
          </template>
        </a-modal>
      </div>

      <a-divider orientation="left">
        状态
      </a-divider>
      <a-steps :current="model.status">
        <a-step title="已创建" description="工装申请单生成"> </a-step>
        <a-step title="申请物料编码" description="申请工装物料编码">
          <a-icon v-if="model.status == 1" slot="icon" type="loading" />
        </a-step>
        <a-step title="生成标签" description="制作打印标签">
          <a-icon v-if="model.status == 2" slot="icon" type="loading" />
        </a-step>
        <a-step title="制作" description="工装制作中">
          <a-icon v-if="model.status == 3" slot="icon" type="loading" />
        </a-step>
        <a-step title="调试" description="工装制作完成,调试中">
          <a-icon v-if="model.status == 4" slot="icon" type="loading" />
        </a-step>
        <a-step title="验收" description="工装调试完成,验收中">
          <a-icon v-if="model.status == 5" slot="icon" type="loading" />
        </a-step>
        <a-step title="入库完成" description="验收完成,入库"> </a-step>
      </a-steps>
    </a-spin>

    <a-divider orientation="left">
      工装治具设备清单
    </a-divider>

    <a-list :grid="{ gutter: 16, column: 4 }" :data-source="fixture_data" size="small">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-tooltip>
          <template slot="title">
            工装名称: {{ item.name }}
            <br />
            工装编码: {{ item.fixtureCode }}
            <br />
            物料编码: {{ item.materialCode }}
            <br />
            创建时间: {{ item.createTime }}
            <br />
            工装状态: {{ item.fixtureStatus }}
          </template>
          <a-card :hoverable="true" @click="handleOpenFixtureCard(item)">
            <a-card-meta>
              <div style="margin-bottom: 3px" slot="title">{{ item.name }}</div>
              <a-avatar class="card-avatar" slot="avatar" shape="square" :src="avUrl" size="large" />
              <div class="meta-content" slot="description">{{ item.fixtureCode }},{{ item.materialCode }}</div>
            </a-card-meta>
            <br />
            <a-tag color="blue" v-if="item.fixtureStatus == 1"> 生成标签</a-tag>
            <a-tag color="blue" v-if="item.fixtureStatus == 2"> 制作</a-tag>
            <a-tag color="blue" v-if="item.fixtureStatus == 3"> 调试</a-tag>
            <a-tag color="blue" v-if="item.fixtureStatus == 4"> 验收</a-tag>
            <a-tag color="blue" v-if="item.fixtureStatus == 5"> 入库</a-tag>
          </a-card>
        </a-tooltip>
      </a-list-item>
    </a-list>

    <FixtureToolModal ref="fixtureDetailModal"></FixtureToolModal>
  </a-modal>
</template>

<script>
import { getMCListByKeyWord } from '@api/api'
import debounce from 'lodash/debounce'
import { getAction } from '@api/manage'
import FixtureToolModal from '@views/genbyte/modal/FixtureToolModal'

import imgUrl from '../../../assets/gongzhuang.png'

export default {
  name: 'OAFixtureReqModal',
  components: {
    FixtureToolModal
  },
  data() {
    //最后一次抓取物料编码列表的标记
    this.lastFetchId = 0
    //防抖
    this.fetchMaterialCode = debounce(this.fetchMaterialCode, 800)

    return {
      title: '工装治具申请明细',
      visible: false,
      //旧物料编码
      oldMaterialCode: '',
      //表单数据
      model: {},

      //物料编码下拉列表数据
      listdata: [],
      selectValue: '', //下拉选中的值
      fetching: false, //下拉加载状态
      //工装头像
      avUrl: '',
      materialCodeModal: {
        title: '查询物料编码',
        visible: false,
        confirmLoading: false
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,

      //工装设备列表信息
      fixture_data: []
    }
  },
  created() {
    this.avUrl = imgUrl
  },
  methods: {
    edit(record, v) {
      console.log(record)
      if (v == 'e') {
        this.hiding = false
        this.disableSubmit = false
      } else if (v == 'd') {
        this.hiding = false
        this.disableSubmit = true
      } else {
        this.hiding = true
        this.disableSubmit = false
      }
      this.model = Object.assign({}, record)
      this.visible = true

      //获取绘制工装治具设备列表数据
      getAction('/fixtureToolCtrl/getFixListByOaFixReqID', { oaFixFlowReqId: record.id }).then(res => {
        if (res.success) {
          this.fixture_data = res.result
          this.$forceUpdate()
        }
      })
    },
    handleOk() {
      //关闭时刷新父组件table, 新的物料编码发生变化才需更新
      if (this.oldMaterialCode !== this.selectValue && this.selectValue !== '') {
        this.$emit('ok', this.model)
      }
      this.visible = false
      //关闭下拉select所在的modal
      this.handleCancelMC()
    },
    handleCancel() {
      //关闭时刷新父组件table
      // this.$emit('ok', this.model)
      this.visible = false
    },
    handleOkMC(e) {
      //物料编码后台更新
      // this.materialCodeModal.confirmLoading = true
      //修改物料编码成功
      this.materialCodeModal.visible = false
      this.oldMaterialCode = this.model.materialCode
      //修改表单的物料编码
      if (this.selectValue !== '') {
        this.model.materialCode = this.selectValue
      }
    },
    handleCancelMC(e) {
      this.materialCodeModal.visible = false
      this.selectValue = ''
    },
    fetchMaterialCode(value) {
      if (value == '') {
        return
      }
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      this.listdata = []
      this.fetching = true

      //关键字搜索物料列表
      getMCListByKeyWord({ keyword: value }).then(res => {
        if (res.success) {
          if (fetchId !== this.lastFetchId) {
            return
          }
          let data = res.result.map(mcInfo => ({
            text: `${mcInfo.materialCode} - ${mcInfo.name} - ${mcInfo.applicableModel}`,
            value: mcInfo.materialCode
          }))

          this.listdata = data
          this.fetching = false
        }
      })
    },
    handleChange(selectValue) {
      Object.assign(this, {
        selectValue,
        listdata: [],
        fetching: false
      })
    },
    //查看单个工装详情
    handleOpenFixtureCard(record) {
      this.$refs.fixtureDetailModal.open(record)
      //传递参数到子组件
      //this.$refs.fixtureDetailModal.title = "查看工装治具详情";
    }
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.meta-content {
  min-height: 42px;
}

.ant-spin-nested-loading {
  .ant-spin-container {
    .ant-row {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
